<template>
  <div class="userMaintain">
    <div class="form_con">
        <el-form ref="form" :rules="rules" label-position="right" label-width="80px" :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="用户名" prop="userName">
                <el-input v-model="formInline.userName" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                    <el-input v-model="formInline.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <div class="item">
                <el-button type="primary" @click="onAddUser">增加</el-button>
            </div>
        </el-form>
    </div>
    <div class="table_con">
        <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
            prop="userId"
            label="用户ID"
            min-width="15%">
        </el-table-column>
        <el-table-column
            prop="userName"
            label="用户名"
            min-width="25%">
        </el-table-column>
        <el-table-column
            prop="password"
            label="密码"
            min-width="25%">
        </el-table-column>
        <el-table-column label="操作" min-width="35%" align="center">
            <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="openEditGra(2,scope.row)">修改</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                @click="delUser(scope.row.userId)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    </div>
  </div>
</template>

<script>
import { _getAllUser, _delUser, _addUser } from '../../network/login.js'

export default {
  name: 'userMaintain',
  data (){
      return{
          tableData: [],
          formInline:{
              userName: '',
              password: ''
          },
          rules: {
            userName: [
                {required: true, message: '请输入用户名', trigger: 'blur' }
            ],
            password: [
                {required: true, message: '请输入用户密码', trigger: 'blur' }
            ]
          }
      }
  },
  mounted(){
      this.getAllUser();
  },
  methods:{
      getAllUser(){
          _getAllUser().then(res => {
          if (res.data.code === 200) {
            this.tableData = res.data.data
          }
          else{
            this.$message({
              message: '数据获取失败',
              type: 'error'
            })
          }
        }).catch(res => {
          this.$message({
            message: '数据获取失败，请联系管理员',
            type: 'error'
          })
        })
      },
      delUser(userId){
        _delUser(userId).then(res => {
          if (res.data.code === 200) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            let index = this.tableData.findIndex((item) => {
                return userId === item.userId
            })
            this.tableData.splice(index, 1)
          }
          else{
            this.$message({
              message: '删除失败',
              type: 'error'
            })
          }
        }).catch(res => {
          this.$message({
            message: '删除失败，请联系管理员',
            type: 'error'
          })
        })
      },
      onAddUser(){
          this.$refs['form'].validate((valid) => {
            if (valid) {
                _addUser(this.formInline.userName,this.formInline.password).then(res => {
                    if (res.data.code === 200) {
                        this.$message({
                        message: '增加成功',
                        type: 'success'
                        })
                        this.getAllUser();
                    }
                    else{
                        this.$message({
                        message: '增加失败',
                        type: 'error'
                        })
                    }
                    }).catch(res => {
                    this.$message({
                        message: '增加失败，请联系管理员',
                        type: 'error'
                    })
                })
            } else {
                this.$message.error('请填写完整')
                return false
            }
          })
        
      }
  }
}
</script>

<style scoped>
.userMaintain{
    height: 100%;
    padding: 20px;
}
.table_con{
    width: 500px;
    margin: 0 auto;
}
.form_con{
    width: 300px;
    margin: 0 auto;
    margin-bottom: 30px;
}
.item{
    text-align: center;
}
</style>
<style>
.table_con .el-table th,.table_con .el-table td{
    text-align: center;
}
</style>
